.problem-detail-layout {
  height: 100vh;
  overflow: hidden;
}

.problem-detail-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  height: 56px;
  z-index: 10;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .logo-btn {
      font-size: 18px;
      font-weight: 600;
      color: #1890ff !important;
      padding: 4px 8px;
    }

    .problem-title {
      font-size: 16px;
      font-weight: 500;
      color: #262626;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;

    .action-btn {
      height: 36px;
      border-radius: 6px;
      font-weight: 500;
    }

    .action-icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      font-size: 18px;
      background-color: #f5f5f5;
      border: 1px solid #d9d9d9;

      &:hover {
        background-color: #e6f7ff;
        border-color: #40a9ff;
        transform: scale(1.05);
      }

      &:active,
      &.ant-btn-loading {
        background-color: #52c41a;
        border-color: #52c41a;
        color: #fff;
      }
    }

    .run-btn {
      color: #52c41a;

      &:hover {
        background-color: #f6ffed;
        border-color: #52c41a;
        color: #52c41a;
      }

      &:active,
      &.ant-btn-loading {
        background-color: #52c41a;
        border-color: #52c41a;
        color: #fff;
      }
    }

    .submit-btn {
      color: #1890ff;

      &:hover {
        background-color: #e6f7ff;
        border-color: #1890ff;
        color: #1890ff;
      }

      &:active {
        background-color: #52c41a;
        border-color: #52c41a;
        color: #fff;
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .toggle-btn {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;

      &:hover {
        background-color: #f0f0f0;
      }

      &.active {
        background-color: #e6f7ff;
        color: #1890ff;
      }
    }
  }
}

.problem-detail-content {
  height: calc(100vh - 56px);
  padding: 0;
  background-color: #f7f7f7;

  .main-panel-group {
    height: 100%;
    background-color: #fff;
  }

  .problem-panel,
  .editor-panel,
  .ai-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .code-editor-panel {
    display: flex;
    flex-direction: column;
  }

  .result-panel {
    border-top: 1px solid #f0f0f0;
  }

  .panel-content {
    height: 100%;
    padding: 16px;
    overflow: auto;
  }

  .ai-panel {
    .panel-content {
      padding: 0;
    }

    .ant-drawer {
      position: static;
      height: 100%;
    }

    .ant-drawer-content-wrapper {
      position: static;
      height: 100%;
      box-shadow: none;
    }

    .ant-drawer-content {
      height: 100%;
      border-radius: 0;
    }

    .ant-drawer-body {
      height: 100%;
      padding: 0;
    }
  }

  .result-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: 1px solid #f0f0f0;

    .ant-card-body {
      flex: 1;
      padding: 12px;
      overflow: auto;
    }
  }
}

// 调整面板调整手柄样式
.resize-handle {
  &-vertical {
    width: 4px;
    background-color: #f0f0f0;
    cursor: col-resize;
    transition: background-color 0.2s;

    &:hover {
      background-color: #1890ff;
    }
  }

  &-horizontal {
    height: 4px;
    background-color: #f0f0f0;
    cursor: row-resize;
    transition: background-color 0.2s;

    &:hover {
      background-color: #1890ff;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .problem-detail-header {
    .header-left {
      .problem-title {
        max-width: 200px;
      }
    }
  }
}

@media (max-width: 768px) {
  .problem-detail-header {
    padding: 0 8px;

    .header-left {
      gap: 8px;

      .problem-title {
        display: none;
      }
    }

    .header-center {
      .action-btn {
        height: 32px;
        font-size: 12px;
      }

      .action-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }
    }

    .header-right {
      .toggle-btn {
        width: 32px;
        height: 32px;
      }
    }
  }

  .problem-detail-content {
    .panel-content {
      padding: 8px;
    }
  }
}